// 星座测试统计图表功能实现

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 获取当前页面的URL路径
    const path = window.location.pathname;
    const page = path.split('/').pop();

    // 根据不同页面初始化不同的图表
    if (page === 'index.html' || page === 'Index.html') {
        initOverviewCharts();
    } else if (page === 'PersonalityAnalysis.html') {
        initPersonalityCharts();
    } else if (page === 'LoveCompatibility.html') {
        initLoveCharts();
    } else if (page === 'CareerPredisposition.html') {
        initCareerCharts();
    } else if (page === 'LifestylePatterns.html') {
        initLifestyleCharts();
    }
});

// 初始化概览页面图表
function initOverviewCharts() {
    // 星座分布图表 - 饼图
    const overviewChartContainer = document.querySelector('.chart-container');
    if (overviewChartContainer) {
        // 创建canvas元素
        const canvas = document.createElement('canvas');
        canvas.id = 'zodiacChart';

        // 清除占位符
        overviewChartContainer.innerHTML = '';
        overviewChartContainer.appendChild(canvas);

        // 星座数据
        const zodiacData = {
            labels: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],
            datasets: [{
                data: [950, 880, 1020, 980, 1100, 990, 1050, 1080, 970, 890, 930, 1003],
                backgroundColor: [
                    '#FF3B30', '#FF9500', '#FFCC00', '#34C759',
                    '#5AC8FA', '#007AFF', '#5856D6', '#AF52DE',
                    '#FF2D55', '#5AC8FA', '#00C7BE', '#FF9500'
                ],
                borderWidth: 0
            }]
        };

        // 创建饼图
        new Chart(canvas, {
            type: 'pie',
            data: zodiacData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            font: {
                                size: 12
                            },
                            padding: 10
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((context.raw / total) * 100);
                                return context.label + ': ' + context.raw + ' (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });
    }
}

// 初始化性格分析页面图表
function initPersonalityCharts() {
    const personalityChartContainer = document.querySelector('.chart-container');
    if (personalityChartContainer) {
        const canvas = document.createElement('canvas');
        canvas.id = 'personalityChart';

        personalityChartContainer.innerHTML = '';
        personalityChartContainer.appendChild(canvas);

        // 十二星座性格特征雷达图数据
        const personalityData = {
            labels: ['外向性', '宜人度', '尽责性', '神经质', '开放性'],
            datasets: [
                {
                    label: '火象星座',
                    data: [80, 50, 55, 60, 70],
                    backgroundColor: 'rgba(255, 59, 48, 0.2)',
                    borderColor: '#FF3B30',
                    borderWidth: 2,
                    pointBackgroundColor: '#FF3B30',
                    pointRadius: 4
                },
                {
                    label: '土象星座',
                    data: [45, 75, 90, 40, 55],
                    backgroundColor: 'rgba(106, 176, 76, 0.2)',
                    borderColor: '#6AB04C',
                    borderWidth: 2,
                    pointBackgroundColor: '#6AB04C',
                    pointRadius: 4
                },
                {
                    label: '风象星座',
                    data: [65, 70, 50, 55, 85],
                    backgroundColor: 'rgba(147, 112, 219, 0.2)',
                    borderColor: '#9370DB',
                    borderWidth: 2,
                    pointBackgroundColor: '#9370DB',
                    pointRadius: 4
                },
                {
                    label: '水象星座',
                    data: [60, 75, 60, 85, 65],
                    backgroundColor: 'rgba(0, 191, 255, 0.2)',
                    borderColor: '#00BFFF',
                    borderWidth: 2,
                    pointBackgroundColor: '#00BFFF',
                    pointRadius: 4
                }
            ]
        };

        // 创建雷达图
        new Chart(canvas, {
            type: 'radar',
            data: personalityData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    r: {
                        beginAtZero: true,
                        max: 100,
                        ticks: {
                            stepSize: 20,
                            display: true
                        },
                        grid: {
                            color: 'rgba(200, 200, 200, 0.2)'
                        },
                        angleLines: {
                            color: 'rgba(200, 200, 200, 0.3)'
                        },
                        pointLabels: {
                            font: {
                                size: 12
                            },
                            color: '#1C1C1E'
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 12
                            },
                            padding: 15
                        }
                    }
                }
            }
        });
    }
}

// 初始化爱情匹配页面图表
function initLoveCharts() {
    const loveChartContainer = document.querySelector('.chart-container');
    if (loveChartContainer) {
        const canvas = document.createElement('canvas');
        canvas.id = 'loveChart';

        loveChartContainer.innerHTML = '';
        loveChartContainer.appendChild(canvas);

        // 爱情观统计柱状图数据
        const loveData = {
            labels: ['注重感情', '注重外貌', '注重性格', '注重经济', '注重默契'],
            datasets: [{
                label: '男性',
                data: [65, 70, 75, 60, 80],
                backgroundColor: '#5AC8FA',
                borderRadius: 8
            },
                {
                    label: '女性',
                    data: [75, 65, 85, 65, 85],
                    backgroundColor: '#FF2D55',
                    borderRadius: 8
                }]
        };

        // 创建柱状图
        new Chart(canvas, {
            type: 'bar',
            data: loveData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: '百分比 (%)'
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });
    }
}

// 初始化职业倾向页面图表
function initCareerCharts() {
    const careerChartContainer = document.querySelector('.chart-container');
    if (careerChartContainer) {
        const canvas = document.createElement('canvas');
        canvas.id = 'careerChart';

        careerChartContainer.innerHTML = '';
        careerChartContainer.appendChild(canvas);

        // 职业倾向分布数据 - 按星座元素分类
        const careerData = {
            labels: ['技术类', '管理类', '创意类', '服务类', '销售类', '科研类'],
            datasets: [
                {
                    label: '火象(白羊/狮子/射手)',
                    data: [15, 30, 25, 10, 40, 10],
                    backgroundColor: 'rgba(255, 59, 48, 0.7)',
                    borderColor: '#FF3B30',
                    borderWidth: 1,
                    borderRadius: 4
                },
                {
                    label: '土象(金牛/处女/摩羯)',
                    data: [45, 25, 15, 20, 15, 35],
                    backgroundColor: 'rgba(52, 199, 89, 0.7)',
                    borderColor: '#34C759',
                    borderWidth: 1,
                    borderRadius: 4
                },
                {
                    label: '风象(双子/天秤/水瓶)',
                    data: [35, 20, 40, 15, 25, 30],
                    backgroundColor: 'rgba(0, 122, 255, 0.7)',
                    borderColor: '#007AFF',
                    borderWidth: 1,
                    borderRadius: 4
                },
                {
                    label: '水象(巨蟹/天蝎/双鱼)',
                    data: [20, 15, 35, 45, 20, 25],
                    backgroundColor: 'rgba(175, 82, 222, 0.7)',
                    borderColor: '#AF52DE',
                    borderWidth: 1,
                    borderRadius: 4
                }
            ]
        };

        // 检测窗口宽度，确定是否为移动设备
        const isMobile = window.innerWidth <= 768;

        // 创建柱状图
        new Chart(canvas, {
            type: 'bar',
            data: careerData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: '星座元素职业倾向分布',
                        font: {
                            size: isMobile ? 14 : 16,
                            weight: 'bold'
                        },
                        padding: {
                            bottom: 15
                        }
                    },
                    legend: {
                        display: true,
                        position: isMobile ? 'bottom' : 'top',
                        labels: {
                            font: {
                                size: isMobile ? 10 : 12
                            },
                            padding: isMobile ? 8 : 15,
                            usePointStyle: true,
                            boxWidth: isMobile ? 8 : 12
                        }
                    },
                    tooltip: {
                        callbacks: {
                            title: function(context) {
                                return context[0].label + ' 职业领域';
                            },
                            label: function(context) {
                                const label = context.dataset.label || '';
                                const value = context.raw;
                                return `${label}: ${value}%`;
                            },
                            afterBody: function(context) {
                                // 添加额外的职业领域描述
                                const descriptions = {
                                    '技术类': '包括IT、工程、编程等专业技能领域',
                                    '管理类': '包括企业管理、项目管理、团队领导等职位',
                                    '创意类': '包括设计、艺术、媒体、广告等创造性工作',
                                    '服务类': '包括教育、医疗、客服等与人打交道的职业',
                                    '销售类': '包括市场营销、客户开发、商务拓展等职位',
                                    '科研类': '包括科学研究、学术教育、技术研发等领域'
                                };
                                const field = context[0].label;
                                return descriptions[field] || '';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '倾向指数 (%)',
                            font: {
                                size: isMobile ? 12 : 14
                            }
                        },
                        ticks: {
                            font: {
                                size: isMobile ? 10 : 12
                            }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: '职业领域',
                            font: {
                                size: isMobile ? 12 : 14
                            }
                        },
                        ticks: {
                            font: {
                                size: isMobile ? 10 : 12
                            }
                        },
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    }
}

// 初始化生活方式页面图表
function initLifestyleCharts() {
    const lifestyleChartContainer = document.querySelector('.chart-container');
    if (lifestyleChartContainer) {
        const canvas = document.createElement('canvas');
        canvas.id = 'lifestyleChart';

        lifestyleChartContainer.innerHTML = '';
        lifestyleChartContainer.appendChild(canvas);

        // 兴趣爱好分布数据
        const lifestyleData = {
            labels: ['阅读', '音乐', '运动', '旅行', '电影', '游戏', '美食'],
            datasets: [{
                label: '喜欢程度',
                data: [65, 80, 70, 85, 75, 60, 90],
                backgroundColor: 'rgba(52, 199, 89, 0.2)',
                borderColor: '#34C759',
                borderWidth: 2,
                tension: 0.4,
                fill: true
            }]
        };

        // 创建折线图
        new Chart(canvas, {
            type: 'line',
            data: lifestyleData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: '百分比 (%)'
                        }
                    }
                }
            }
        });
    }
}

// 初始化生活习惯统计图表
function initHabitsCharts() {
    // 睡眠习惯图表 - 环形图(上图风格)
    const sleepCanvas = document.getElementById('sleepChart');
    if (sleepCanvas) {
        const sleepData = {
            labels: ['早睡组', '正常作息', '熬夜组'],
            datasets: [{
                data: [35, 40, 25],
                backgroundColor: ['rgba(52, 199, 89, 0.7)', 'rgba(147, 112, 219, 0.7)', 'rgba(255, 59, 48, 0.7)'],
                borderColor: '#FFFFFF',
                borderWidth: 2
            }]
        };

        new Chart(sleepCanvas, {
            type: 'pie',
            data: sleepData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw + '%';
                            }
                        }
                    }
                }
            }
        });
    }

    // 饮食习惯图表 - 用户指定风格
    const dietCanvas = document.getElementById('dietChart');
    if (dietCanvas) {
        const dietData = {
            labels: ['健康饮食', '均衡饮食', '随意饮食', '重口味'],
            datasets: [{
                data: [30, 45, 15, 10],
                backgroundColor: ['rgba(52, 199, 89, 0.7)', 'rgba(90, 200, 250, 0.7)', 'rgba(255, 149, 0, 0.7)', 'rgba(255, 59, 48, 0.7)'],
                borderColor: '#FFFFFF',
                borderWidth: 2
            }]
        };

        new Chart(dietCanvas, {
            type: 'doughnut',
            data: dietData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw + '%';
                            }
                        }
                    }
                }
            }
        });
    }

    // 运动习惯图表 - 用户指定风格
    const exerciseCanvas = document.getElementById('exerciseChart');
    if (exerciseCanvas) {
        const exerciseData = {
            labels: ['高频运动', '定期运动', '偶尔运动', '很少运动'],
            datasets: [{
                data: [25, 35, 30, 10],
                backgroundColor: ['rgba(255, 59, 48, 0.7)', 'rgba(52, 199, 89, 0.7)', 'rgba(147, 112, 219, 0.7)', 'rgba(158, 158, 158, 0.7)'],
                borderColor: '#FFFFFF',
                borderWidth: 2
            }]
        };

        new Chart(exerciseCanvas, {
            type: 'pie',
            data: exerciseData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw + '%';
                            }
                        }
                    }
                }
            }
        });
    }

    // 消费习惯图表 - 用户指定风格
    const spendingCanvas = document.getElementById('spendingChart');
    if (spendingCanvas) {
        const spendingData = {
            labels: ['理性消费', '冲动消费', '注重品质', '节省型'],
            datasets: [{
                data: [35, 20, 25, 20],
                backgroundColor: ['rgba(147, 112, 219, 0.7)', 'rgba(255, 149, 0, 0.7)', 'rgba(90, 200, 250, 0.7)', 'rgba(52, 199, 89, 0.7)'],
                borderColor: '#FFFFFF',
                borderWidth: 2
            }]
        };

        new Chart(spendingCanvas, {
            type: 'doughnut',
            data: spendingData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '60%',
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw + '%';
                            }
                        }
                    }
                }
            }
        });
    }
}